<template>
  <div>
    <div class="panel">
      <div class="panel-header">门店主体信息</div>
      <i-form
        class="import-form"
        :default-span="12"
        ref="form"
        :items="formItems"
        :model="form"
        :rules="rules"
        :inline="true"
        :label-width="200"
      >
        <template slot="address">
          <el-form-item label="门店所在地" prop="area">
            <HycAddressCascader ref="area" v-model="form.area" />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">门店结算账户信息</div>
      <i-form
        class="import-form"
        :inline="true"
        :label-width="200"
        :default-span="12"
        ref="accountForm"
        :items="accountFormItems"
        :model="accountForm"
        :rules="accountRules"
      >
        <template slot="accountValidDate">
          <el-form-item prop="accountValidDate" label="营业执照有效期" required>
            <SearchDatePicker
              :start.sync="accountForm.startTime"
              :end.sync="accountForm.endTime"
            />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel">
      <div class="panel-header">门店照片</div>
      <i-form
        ref="uploadForm"
        class="import-form"
        :default-span="12"
        :items="uploadFormItems"
        :model="uploadForm"
        :rules="uploadRules"
        :inline="true"
        :label-width="200"
      >
        <template slot="pic1">
          <el-form-item label="整体门面（含招牌）" prop="pic1" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic1"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="pic2">
          <el-form-item label="收银台" prop="pic2" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic2"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="pic3">
          <el-form-item label="店内环境" prop="pic3" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic3"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <!-- <template slot="pic1">
          <el-form-item label="《中国光大银行杭州分行特约商户综合支付服务入网申请单》扫描件、银行卡照片、门店照片" prop="pic1" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic1"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="pic2">
          <el-form-item label="身份证正面" prop="pic2" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic2"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="pic3">
          <el-form-item label="身份证反面:" prop="pic3" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic3"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="pic4">
          <el-form-item label="与商户签署的运营协议扫描件" prop="pic4" required>
            <hyc-form-upload
              ref="stationImg"
              v-model="uploadForm.pic4"
              :upload-data="stationImgData"
              show-cropper
            >
            </hyc-form-upload>
          </el-form-item>
        </template> -->
      </i-form>
    </div>
  </div>
</template>
<script>
import formValidate from '@/utils/validate'
import SearchDatePicker from '@/components/SearchDatePicker'
import HycFormUpload from '@/components/hycFormUpload'
import HycAddressCascader from '@/components/hycAddressCascader'
import { typeMap } from '@/utils/format'
export default {
  name: 'UserUnionpfayStoreInfo',
  components: { HycAddressCascader, SearchDatePicker, HycFormUpload },
  methods: {
    changeItems(target, targetItemValue, attr, attrNewVal) {
      if (!Array.isArray(target)) return

      let index = target.findIndex((item) => item.value === targetItemValue)

      if (index < 0) return

      this.$set(target, index, {
        ...target[index],
        [attr]: attrNewVal,
      })
    },
  },
  data() {
    return {
      stationImgData: { fileType: 'IMAGE' },
      formItems: [
        {
          label: '商户名称',
          value: 'mct_name',
          type: 'text',
          required: true,
          clearable: true,
          disabled: true,
        },
        {
          label: '招牌名',
          value: 'brand_name',
          type: 'text',
          required: true,
          clearable: true,
          disabled: true,
        },
        {
          label: '门店全称',
          value: 'shop_full_name',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 50,
          'show-word-limit': true,
          placeholder: '须同营业执照名称一致',
        },
        {
          label: '门店简称',
          value: 'shop_name',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 50,
          'show-word-limit': true,
        },
        {
          slot: 'address',
        },
        {
          label: '详细地址',
          value: 'address',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 150,
          'show-word-limit': true,
        },
        {
          label: '门店电话',
          value: 'tel',
          type: 'text',
          required: true,
          clearable: true,
        },
        {
          label: '门店负责人',
          value: 'contact',
          type: 'text',
          required: true,
          clearable: true,
          maxlength: 25,
          'show-word-limit': true,
        },
      ],
      form: {},
      rules: {
        area: [{ required: true }],
        tel: [
          {
            validator: formValidate('validateServiceMobile'),
            trigger: ['change', 'blur'],
          },
        ],
      },
      accountFormItems: [
        {
          label: '营业执照类型',
          required: true,
          type: 'select',
          clearable: true,
          value: 'bl_type',
          options: [
            {
              label: '三证合一',
              value: '三证合一',
            },
            {
              label: '非三证合一',
              value: '非三证合一',
            },
          ],
        },
        {
          slot: 'accountValidDate',
        },
        {
          label: '营业执照号',
          required: true,
          type: 'text',
          clearable: true,
          value: 'bl_no',
          maxlength: 30,
          'show-word-limit': true,
        },
        {
          label: '结算账户类型',
          value: 'account_type',
          clearable: true,
          required: true,
          type: 'radio',
          options: [
            {
              label: '2',
              text: '对私',
            },
            {
              label: '1',
              text: '对公',
            },
          ],
        },
        {
          label: '结算账户人身份',
          value: 'account_boss',
          clearable: true,
          required: true,
          type: 'radio',
          options: [
            {
              label: '门店负责人',
              value: '1',
            },
            {
              label: '门店负责人亲属',
              value: '2',
            },
          ],
        },
        {
          label: '证件类型',
          required: true,
          type: 'select',
          options: typeMap.selectOptions([], 'identifyType'),
          clearable: true,
          value: 'account_id_type',
        },
        {
          label: '门店负责人证件号',
          required: true,
          type: 'text',
          clearable: true,
          value: 'account_id_no',
          maxlength: 18,
          'show-word-limit': true,
        },
        {
          label: '开户行',
          value: 'bank_name',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 25,
          'show-word-limit': true,
        },
        {
          label: '开户名',
          value: 'account_name',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 25,
          'show-word-limit': true,
        },
        {
          label: '银行账号',
          value: 'account_no',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 30,
          'show-word-limit': true,
        },
        {
          label: '清算联行号',
          value: 'bank_no',
          clearable: true,
          required: true,
          type: 'text',
          maxlength: 30,
          'show-word-limit': true,
        },
      ],
      accountForm: {
        accountValidDate: 'default',
      },
      accountRules: {
        accountValidDate: [
          {
            validator: (rule, value, callback) => {
              if (
                !this.accountForm.startTime ||
                this.accountForm.startTime === '' ||
                !this.accountForm.endTime ||
                this.accountForm.endTime === ''
              ) {
                callback(new Error('必须选择开始和结束时间'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      uploadFormItems: [
        {
          slot: 'pic1',
        },
        {
          slot: 'pic2',
        },
        {
          slot: 'pic3',
        },
      ],
      uploadForm: {},
      uploadRules: {},
    }
  },
}
</script>
<style lang="scss" scoped>
.import-form {
  padding-right: 200px;
}
</style>
